/*****************************************************
*
*     Read me
*
******************************************************/
// Install yarn with 'yarn'
// Compile this less file with 'yarn compile'



/*****************************************************
*
*     Imports
*
******************************************************/


//
// UIKit Core
//
@import "../src/less/uikit.less";

//
// Stageone Customizings
//
@import "../../lib/css/so-uikit-config.less";
@import "../../lib/css/so-less-lib.less";
@import "../../lib/css/so-css-plugins.less";
@import "../../lib/css/so-template-base-styles.less";



/*****************************************************
*
*     Stageone Template
*
******************************************************/

//
// Phone portrait
//

body {
  //.fontSmoothing();
}

a, .uk-link, .uk-button, button, input[type="button"],
.uk-form-label {
  .transition();
}



h1, .uk-h1 {
  color:@color-a;
}

h4, .uk-h4, h5, .uk-h5 {
  text-transform: uppercase;
}

a.uk-h1,
a.uk-h2,
a.uk-h3,
a.uk-h4,
a.uk-h5,
a.uk-h6 {
  color:@global-link-color;
  &:hover {
    color:@global-link-hover-color;
  }
}

a:not([class*='uk-card-default']):not([class*='uk-card-primary']):not([class*='uk-card-secondary']) {
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    .transition();
  }
  &:hover {
    .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
      color:@global-link-hover-color !important;
    }
  }
}

.link-hover-a {&:hover{color:@color-a !important;}}
.link-hover-b {&:hover{color:@color-b !important;}}
.link-hover-c {&:hover{color:@color-c !important;}}
.link-hover-d {&:hover{color:@color-d !important;}}
.link-hover-e {&:hover{color:@color-e !important;}}
.link-hover-f {&:hover{color:@color-f !important;}}

.global-gap {
  padding:@global-small-gutter 0;
}

.offset-section {
  //margin-top:150px;

  > div {
    margin-bottom:-110px !important;
    .transform(translate(0,-110px));
  }

}

.offset-inverse-section {
  padding-bottom:110px;

  > div {
    margin-bottom:-110px !important;
    //.transform(translate(0,150px));
  }

}

.offset-inverse-follow-section {
  padding-top:80px;
}

.offset-icon {
  margin-top:-50px !important;
}

#header-sticky {
  .transition();
  &:hover {
    background:darken(@global-muted-color,4%);
  }
}

.homepage-visible-only,
#homepage-header {
  display: none;
}

.homepage {
  #header-sticky {
    margin-top:-9999px;
  }

  #main-header.uk-sticky.uk-sticky-fixed {

    #header-sticky {margin-top:0px}
  }

  .homepage-visible-only,
  #homepage-header {
    display: block;
  }
}

#meta-navigation {
  height: 0;
  outline:none;
  .meta-content {
    .transition();
    .transform(translateY(60px));
  }

  &.is-visible {
    height:auto;
    .meta-content {
      .transform(translateY(0px));
    }
  }
}

.uk-light {
  #main-navigation-home {
    li:hover {
      > a {
        color: @color-a;
      }

    }
  }
}

/*
#main-navigation-home {
  .level-1:hover {
    > a {
      background: darken(@global-muted-color,4%);
    }
  }
}

 */

.status-frei {
  color:@color-success;
}

.status-teilweise {
  color:@color-warning;
}

.status-belegt {
  color:@color-danger;
}

.cat-184 {
  color:@color-c !important;
}

.uk-dotnav {
  li {
  margin-top: @dotnav-margin-vertical;
  margin-bottom: @dotnav-margin-vertical;
  }
}


#homepage-header {
  .uk-navbar-container {
    background: @global-muted-color;
  }
}

/*
#homepage-header {
  &:hover {
    background:darken(@global-muted-color,4%);
  }
}

 */

.has-site-overlay {
  #header-sticky {
    background:darken(@global-muted-color,4%);
  }

  /*
  #homepage-header {
    background:darken(@global-muted-color,4%);
  }

   */

}


#news-batch {
  padding: 15px;
  margin-right:23px;
  margin-bottom: 110px;
  z-index: 2000;
}

a#news-batch {
  &:hover {
    color:@color-e !important;
  }
}


#modal-navigation {
  .uk-modal-header {
    height:120px;
  }

  .uk-modal-body {
    max-height: 100vh;
    height:100vh;
  }
}

#eyecatcher-section.content-eyecatcher {
  padding-top:120px;
}

.eyecatcher-placeholder {
  height:45px;
}

#papillon-mobile-header-right {
  overflow: hidden;
  max-width:100%;
  img {
    width: 150%;

  }

}

#papillon-header-right {
  max-width:80%;
  width:80%;
}


#papillon-header-left {
  width:60%;
  img {
    left:-130px;
    bottom:-800px;
  }
}

.uk-card-muted.uk-card-hover {
  .card-hover-content {
    .transition(max-height 0.75s ease);
    max-height:0;
    .card-hover-inner-content {
      .transition(margin 0.75s ease);
      transition-delay: 0.2s;
      margin-top:0px;
    }
  }

  .card-hover-offset {
    .transition(margin 0.3s ease);
    margin-top:0;
    margin-bottom:0;
  }

  .hover-icon {
    .transition(opacity 0.3s ease);
    opacity: 0;
  }

  .uk-overlay-primary {
    .transition(background 0.3s ease);
  }

}

.uk-light .uk-card-muted,
.uk-light.uk-card-muted {
  color:@global-inverse-color;
}

.uk-card-muted.uk-card-hover:hover {

  .card-hover-content {
    .transition(max-height 1.3s ease);
    max-height:200px;
    .card-hover-inner-content {
      .transition(margin 0.3s ease);
      margin-top:20px;
    }

  }

  .card-hover-offset {
    margin-top:25px;
    margin-bottom:25px;
  }

  .hover-icon {
    opacity: 1;
  }

  .uk-overlay-primary {
    background:fade(@color-black, 75%);
  }
}

.uk-button {
  padding-top:@global-xsmall-margin;
  padding-bottom:@global-xsmall-margin;
  .fontBold();
  text-transform: uppercase;
}

.uk-button-default,
.uk-button-primary,
.uk-button-secondary {
  .outlineBorder();
  &:hover {
    .outlineBorder(@global-muted-color,@global-link-hover-color);
  }
}

.uk-button-primary {
  .outlineBorder(@global-muted-color,@color-a);
}

.uk-button-secondary {
  .outlineBorder(@global-muted-color,@color-c);
}

.uk-card-default {

  .uk-button-default {
    .outlineBorder(@global-muted-color, @color-a);
    &:hover {
      color:@color-white !important;
      .outlineBorder(@color-a,@global-link-hover-color);
    }
  }

  .uk-button-primary {
    color:@color-a !important;
    background: @global-muted-color;
    .outlineBorder(@color-a, @global-muted-color);
    &:hover {
      color:@color-white !important;
      background: @color-e;
      .outlineBorder(@color-a,@global-link-hover-color);
    }
  }

  .uk-button-secondary {
    color:@global-muted-color;
    background: @color-b;
    .outlineBorder(@color-a, @color-b);
    &:hover {
      color:@color-white !important;
      .outlineBorder(@color-a,@global-link-hover-color);
    }
  }

}

.uk-card-primary {

  .uk-button-default {
    .outlineBorder(@global-muted-color, @color-d);
    &:hover {
      color:@color-white !important;
      .outlineBorder(@color-d,@global-link-hover-color);
    }
  }

  .uk-button-primary {
    color:@color-d !important;
    .outlineBorder(@color-d, @global-muted-color);
    &:hover {
      color:@color-white !important;
      .outlineBorder(@color-d,@global-link-hover-color);
    }
  }

  .uk-button-secondary {
    color:@global-muted-color !important;
    background: @color-c !important;
    .outlineBorder(@color-d, @color-c);
    &:hover {
      color:@color-white !important;
      background: @color-e !important;
      .outlineBorder(@color-d,@global-link-hover-color);
    }
  }

}

.uk-card-secondary {
  .uk-button-default {
    .outlineBorder(@global-muted-color, @color-f);
    &:hover {
      color:@color-white !important;
      .outlineBorder(@color-f,@global-link-hover-color);
    }
  }

  .uk-button-primary {
    color:@color-f !important;
    .outlineBorder(@color-f, @global-muted-color);
    &:hover {
      color:@color-white !important;
      .outlineBorder(@color-f,@global-link-hover-color);
    }
  }

  .uk-button-secondary {
    color:@global-muted-color !important;
    background: @color-e !important;
    .outlineBorder(@color-f, @color-e);
    &:hover {
      color:@color-white !important;
      background: @color-base-b !important;
      .outlineBorder(@color-f,@color-base-b);
    }
  }
}


.outline-border {
  padding:@global-xsmall-margin;
  //margin:@global-xsmall-margin;
  > div {
    .outlineBorder();
  }

  &.outline-muted {
    > div {
      .outlineBorder(fade(@color-e,30%), fade(@color-e,15%), 2px, @global-xsmall-margin);
    }

  }

}

.uk-logo {
  width:140px;
  margin-top:3px;
  .rotate(-5deg);
}

.logo-title {
  font-size:0.9em;
  line-height: 1;
}

.logo-subtitle {
  font-size:0.675em;
  line-height: 1;
}

#homepage-logo {
  padding-top:25px;
  padding-left:23px;
  .uk-logo {
    width:160px;
    .rotate(-7deg);
  }
  .logo-title {
    font-size:1.1em;
    line-height: 1;
  }

  .logo-subtitle {
    font-size:0.875em;
    line-height: 1;
  }
}


.homepage-top-mask {
  height: 200px;
  width:260px;
}

.top-mask {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:20%;
  background-image: url('/themes/papillon-01/assets/images/mask-top-white.svg');
  background-size: 110% auto;
  background-position: 50% -2px;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1000;
}


.top-mask-positive {
  top:0px;
  height:50px;
  width: 100%;
  margin-top:-27px;
  .transition();
}

.is-touch-device,
.is-safari {
  .top-mask-positive {
    display: none !important;
  }
}

.uk-card-hover {
  &:hover {
    .top-mask-positive {
      color:@color-e !important;
    }
  }

}

.mask-muted {
  background-image: url('/themes/papillon-01/assets/images/mask-top-muted.svg');
}

.mask-left,
.mask-right {
  height:110% !important;
  top:-5% !important;
  width:auto !important;
}

.mask-left {
  left:-2px !important;
}

.mask-right {
  right:-2px !important;
}

.switcher-icon {
  .transition();
}

.chevron-toggle-container.uk-open {
  .switcher-icon {
    .rotate(180deg);
    color:@color-a;
  }
}

.square-btn {
  width:45px;
  height:45px;
}

.slide-container {
  z-index:800;
  cursor:pointer;
  width:45px;

  .slide-toggle-btn {
    .transition();
    &:hover {
      background: @color-white;
    }
  }

  .slide-static,
  .slide-dynamic {
    .transition();
    overflow:hidden;
  }

  .slide-dynamic {
    width:0px;
    margin-right:45px;
    .square-btn {
      &:hover {
        background: @color-a;
        color:@color-white;
      }
    }
  }

  &.active {
    width:100%;
    .slide-toggle-btn {
      background: @color-a;
      color:@color-white;
    }
    .slide-dynamic {
      width:100%;
    }
  }

}


// form style
.uk-input, .uk-textarea {
  border-bottom:@global-border-width solid @global-border;
}

label {
  .transition();
}

.has-focus {
  label {
    color:@color-a;
  }
  .uk-input, .uk-textarea {
    border-color:@color-a;
  }
}

.ipt-error {
  label {
    color:@color-danger;
  }
  .uk-input, .uk-textarea {
    border-color:@color-danger;
  }

}

.ipt-valid {
  label {
    color:@color-success;
  }
  .uk-input, .uk-textarea {
    border-color:@color-success;
  }

}

.uk-table-divider.has-last-divider {
  tr:last-child {
    border-bottom:@global-border-width solid @global-border !important;
  }

}

.gradient-overlay-section {
  height: 250px;
}

.background-gradient {
  .gradient();
}

//
// Tablet portrait
//

@media (min-width: @breakpoint-small) {

  .global-gap {
    padding:@global-small-gutter;
  }

  #papillon-header-right {
    max-width:100%;
    width:550px;
  }


  .uk-logo {
    width:155px;
  }

  .logo-title {
    font-size:1em;
    line-height: 1;
  }

  .logo-subtitle {
    font-size:0.775em;
    line-height: 1;
  }

  #homepage-logo {
    padding-top:35px;
    padding-left:33px;
    .uk-logo {
      width:180px;
    }
    .logo-title {
      font-size:1.2em;
    }
    .logo-subtitle {
      font-size:0.95em;
    }
  }

  .homepage-top-mask {
    height: 230px;
    width:340px;
  }

  #modal-navigation {
    .uk-modal-body {
      max-height: inherit;
      height:inherit;
    }
  }

  .outline-border {
    padding:@global-gutter;
    //margin:@global-gutter;

    &.outline-muted {
      > div {
        .outlineBorder(fade(@color-e,30%), fade(@color-e,15%), 2px, @global-gutter);
      }

    }

  }


}



//
// Tablet landscape
//
@media (min-width: @breakpoint-medium) {

  .global-gap {
    padding:@global-gutter;
  }

  #modal-navigation {
    .uk-modal-header {
      height:150px;
    }
  }

  #eyecatcher-section.content-eyecatcher {
    padding-top:150px;
  }

  .gradient-overlay-section {
    height: 370px;
  }

  #papillon-header-right {
    width:550px;
  }

  #homepage-logo {
    padding-top:35px;
    padding-left:33px;
    .uk-logo {
      width:180px;
    }
  }

  .homepage-top-mask {
    height: 240px;
    width:350px;
  }

  .uk-logo {
    width: 165px;
  }

  .logo-title {
    font-size:1.2em;
    line-height: 1;
  }

  .logo-subtitle {
    font-size:0.875em;
    line-height: 1;
  }
}


//
// Desktop
//

@media (min-width: @breakpoint-large) {

  .global-gap {
    padding:@global-gutter;
  }

  #homepage-header {
    .uk-navbar-container {
      background: transparent;
    }
  }

  .uk-logo {
    width:175px;
    margin-top:6px;
  }

  .logo-title {
    font-size:1.3em;
    line-height: 1.1;
  }

  .logo-subtitle {
    font-size:0.975em;
    line-height: 1.1;
  }

  #homepage-logo {
    padding-top:55px;
    padding-left:33px;
    .uk-logo {
      width:230px;
    }
    .logo-title {
      font-size:1.5em;
      line-height: 1.1;
    }

    .logo-subtitle {
      font-size:1.275em;
      line-height: 1.1;
    }
  }

  .homepage-top-mask {
    height: 240px;
    width:350px;
  }

  .eyecatcher-placeholder {
    height:55px;
  }

}

//
// Large screens
//

@media (min-width: @breakpoint-xlarge) {

  #modal-navigation {
    .uk-modal-header {
      height:180px;
    }
  }

  #eyecatcher-section.content-eyecatcher {
    padding-top:180px;
  }


}


//
// Crossbrowser fallback
//

.is-explorer {
  // Empty
}

.is-explorer-11 {
  // Empty
}